<template>
  <header>
    <div class="l-content">
      <el-button class="el-icon-menu" plain size="mini" @click="changeCollapse"></el-button>
      <!-- 面包屑渲染start -->
      <el-breadcrumb separator="/" id="breadcol">
        <el-breadcrumb-item v-for="item in tabs" :key="item.path" :to="{ path: item.path }">
          {{ item.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 面包屑渲染end -->
    </div>
    <div class="r-content">
      <el-dropdown trigger="click">
        <span><img :src="userImg" class="user" /></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>用户中心</el-dropdown-item>
          <el-dropdown-item @click.native="DelToken()">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </header>
</template>

<script>
import { mapState } from "vuex";
import { delToken, Getbyids } from "@/request/auth.js";
import appConfig from "@/config/appconfig.js";
import { GetFilesUser, GetAppUserByid } from "@/api/Blogslist.js";
export default {
  name: "CommonHeader",
  data() {
    return {
      userImg: "",
      Avatarid: localStorage.getItem("Avatarid")
    };
  },
  methods: {
    getAvatar() {
      this.userImg = `${appConfig.baseUrl}/files/${this.Avatarid}`
      console.log(this.userImg)
      if (localStorage.getItem('imageurl')) {
        this.userImg = localStorage.getItem('imageurl')
      }
    },
    DelToken() {
      delToken();
      sessionStorage.removeItem("menus");
      localStorage.removeItem("imageurl");
      this.$router.push("/login");
    },
    changeCollapse() {
      this.$store.commit("changeCollapse");
    },
  },
  mounted() {
    this.getAvatar();
  },
  computed: {
    ...mapState({
      tabs: (state) => state.tab.tabsList,
    }),
  },
};
</script>

<style scoped lang="less">
header {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;

  .l-content {
    display: flex;
    align-items: center;

    .el-button {
      margin-right: 20px;
    }
  }

  .el-avatar {
    margin-left: 30px;
  }

  .r-content {
    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }

  #breadcol {
    color: #fff;
  }
}
</style>